<template>
  <div id="globalHeader">
    <a-row :wrap="false">
      <a-col flex="360px">
        <router-link to="/">
          <div class="title-bar">
            <div class="title">综合信息服务平台</div>
          </div>
        </router-link>
      </a-col>
      <a-col flex="auto"></a-col>
      <!-- 用户信息展示栏 -->
      <a-col flex="120px">
        <div class="user-login-status">
          <div v-if="loginUserStore.loginUser?.id">
            <a-dropdown class="user-info">
              <a-space style="color: white; font-size: 18px">
                <a-avatar :src="loginUserStore.loginUser.userAvatar" />
                {{ loginUserStore.loginUser.userName ?? '无名' }}
              </a-space>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="clickToUserInfo">
                    <UserOutlined />
                    个人信息
                  </a-menu-item>
                  <a-menu-item @click="doLogout">
                    <LogoutOutlined />
                    退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <div v-else>
            <a-button type="primary" @click="clickToLogin">登录</a-button>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import router from '@/router'
import { userLogoutUsingPost } from '@/api/userController.ts'
import { message } from 'ant-design-vue'
import { LogoutOutlined, UserOutlined } from '@ant-design/icons-vue'

const loginUserStore = useLoginUserStore()

const clickToLogin = () => {
  router.push('/user/login')
}
// 用户注销
const doLogout = async () => {
  const res = await userLogoutUsingPost()
  if (res.data.code === 0) {
    loginUserStore.setLoginUser({
      userName: '未登录',
    })
    message.success('退出登录成功')
    router.replace('/user/login')
  } else {
    message.error('退出登录失败' + res.data.message)
  }
}

const clickToUserInfo = () => {
  router.push('/user/info')
}

</script>

<style scoped>

.title {
  color: white;
  font-size: 24px;
  font-weight: bold;
  margin-left: 16px;
}

</style>
